<template>
    <div ref="chartRef" class="trend-chart" />
</template>
<script setup>
import * as echarts from 'echarts'
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
    data: {
        type: Object,
        default: () => { }
    },
    gradients: {
        type: Array,
        default: () => []
    },
})

const chartRef = ref()
const chartInstance = ref()
const chartData = ref([
    { name: '整改', value: '400', warehouseName: "仓库1" },
    { name: '未整改', value: '60', warehouseName: "仓库1" }
])

// 计算x轴最大值（数据最大值+50）
const calculateXAxisMax = computed(() => {
    const values = chartData.value.map(item => Number(item.value));
    const maxValue = Math.max(...values);
    return maxValue + 20;
})


watch(() => props.data, (newVal) => {
    // console.log('newVal', newVal);
    // chartInstance.value.setOption({
    //     xAxis: {
    //         max: calculateXAxisMax.value
    //     },
    //     series: [
    //         {
    //             name: "barData",
    //             data: newVal
    //         }
    //     ]
    // })
    nextTick(() => {
        const data = [
            { name: "整改", value: newVal.rectified, warehouseName: newVal.name },
            { name: "未整改", value: newVal.unRectified, warehouseName: newVal.name }
        ]
        chartData.value = data
        initData()
    })
}, { deep: true, immediate: true })

const initData = () => {

    const data = {
        title: { show: false },
        tooltip: {
            show: false,
            trigger: "axis",
            backgroundColor: "rgba(21, 154, 255, 0.32)",
            textStyle: {
                color: "#fff",
            },
            borderColor: "#159AFF",
            axisPointer: {
                lineStyle: {
                    color: "transparent",
                },
            },
        },
        grid: {
            // containLabel: true,
            bottom: 3,
            left: '25%',
            top: 3,
            right: '17%',
        },
        xAxis: {
            type: "value",
            max: calculateXAxisMax.value, // 设置最大值
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                axisLabel: { show: false },
                axisLine: { show: false, },
                axisTick: { show: false, },
                splitLine: { show: false, },
            },
            {
                type: "category",
                data: chartData.value.map(item => item.value),
                inverse: true,
                axisLabel: {
                    inside: true,// 数值和图表分离
                    verticalAlign: "bottom",
                    lineHeight: 1,
                    margin: -45,
                    color: '#FFFFFF',
                    fontSize: 14,
                },
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: { show: false },
            },
        ],
        series: [
            {
                name: "barData",
                type: "bar",
                barWidth: 5,
                showBackground: true,
                data: chartData.value,
                backgroundStyle: {
                    color: 'rgba(255, 255, 255, .1)',
                },
                label: {
                    show: true,
                    offset: [-75, 15],
                    color: '#FFFFFF',
                    fontSize: 14,
                    position: 'left',
                    align: 'left',
                    formatter: function (params) {
                        if (params.dataIndex === 0) {
                            return params.data.warehouseName;
                        } else {
                            return '';
                        }
                    },
                },
                itemStyle: {
                    color: function (params) {
                        return {
                            type: 'linear',
                            ...props.gradients[params.dataIndex],
                            global: false
                        };
                    }
                },
                emphasis: {
                    itemStyle: {
                        color: function (params) {
                            return {
                                type: 'linear',
                                ...props.gradients[params.dataIndex],
                                global: false
                            };
                        }
                    }
                },
            },
            {
                name: "外圆",
                type: "scatter",
                emphasis: {
                    scale: false,
                },
                tooltip: {
                    show: false
                },
                // 方块
                symbol: "roundRect",
                symbolSize: [4, 13],// 进度条白点
                itemStyle: {
                    color: '#FFFFFF',
                },
                z: 2,
                data: chartData.value,
                animationDelay: 500,
            },
        ],
    };
    data && chartInstance.value.setOption(data)
    // chartInstance.value.on('click', function (params) {
    //     console.log('barClick', params);
    // });
}
onMounted(() => {
    chartInstance.value = echarts.init(chartRef.value)
    initData()
})

</script>

<style scoped lang="scss">
.trend-chart {
    width: 100%;
    height: 100%;
}
</style>